<template>
    <div>
            <Tabs type="card" :draggable="true" @on-drag-drop="handleDragDrop">
                <TabPane v-for="(tab, index) in tabList" :key="index" :label="tab.label" :name="tab.name">
                    {{ tab.label }}
                </TabPane>
            </Tabs>
            
    </div>
</template>

<script setup>
import {ref} from "vue"
let tabList=ref([
                    {
                        label: '标签一',
                        name: 'name1'
                    },
                    {
                        label: '标签二',
                        name: 'name2'
                    },
                    {
                        label: '标签三',
                        name: 'name3'
                    },
                    {
                        label: '标签四',
                        name: 'name4'
                    },
                    {
                        label: '标签五',
                        name: 'name5'
                    }
])
// 拖拽调整标签顺序
const handleDragDrop =function (name, newName, a, b, names) {
    tabList.value.splice(b,1,...tabList.value.splice(a, 1 , tabList.value[b]));
}

</script>

<style  scoped>

</style>